import React from "react";
import { Component } from "react";
import { getSchoolRankApi } from "../../js/bigscreen/api";
import "../../css/bigscreen/schoolrank.css"
class SchoolRank extends Component {
    constructor(props) {
        super(props);
        this.state = {
            schoolList: {
                "高中": { name: "", points: 0 },
                "初中": { name: "", points: 0 },
                "小学": { name: "", points: 0 },
                "幼儿园": { name: "", points: 0 }
            }
        }
    }

    componentDidMount() {
        this.getSchoolRank(parseInt(sessionStorage.getItem("departmentId")));
    }

    getSchoolRank = (parent) => {
        getSchoolRankApi(parent).then((res) => {
            if (res.data) {
                const list = {
                    "高中": { name: "", points: 0 },
                    "初中": { name: "", points: 0 },
                    "小学": { name: "", points: 0 },
                    "幼儿园": { name: "", points: 0 }
                };
                console.log("res", res)
                res.data.schoolList.forEach((item) => {
                    if (list[item.schooltype]) {
                        if (item.points > 0) {
                            list[item.schooltype].name = item.schoolname;
                            list[item.schooltype].points = Math.round(item.points);
                        }
                    }
                })
                this.setState({
                    schoolList: list
                })
            }
        }).catch((e) => {
            console.log(e);
        })
    }


    render() {
        return (
            <div className="schoolrankbg">
                <div className="schoolrankheader">
                    <svg class="icon" aria-hidden="true">
                        <use xlinkHref="#icon-paimingkaoqian-01"></use>
                    </svg>
                    <span className="schoolrankheadertxt">学校综合排名</span>
                </div>
                <div className="schoolrankcontent">
                    <ul>
                        <li className="schoolitem">
                            <span className="headername">学校</span>
                            <span className="headerscore">综合积分</span>
                        </li>
                        <li className="schoolitem">
                            <span className="type">高中</span>
                            <span className="name">{this.state.schoolList["高中"].name}</span>
                            <span className="score">{this.state.schoolList["高中"].points}</span>
                        </li>
                        <li className="schoolitem">
                            <span className="type">初中</span>
                            <span className="name">{this.state.schoolList["初中"].name}</span>
                            <span className="score">{this.state.schoolList["初中"].points}</span>
                        </li>
                        <li className="schoolitem">
                            <span className="type">小学</span>
                            <span className="name">{this.state.schoolList["小学"].name}</span>
                            <span className="score">{this.state.schoolList["小学"].points}</span>
                        </li>
                        <li className="schoolitem">
                            <span className="type">幼儿园</span>
                            <span className="name">{this.state.schoolList["幼儿园"].name}</span>
                            <span className="score">{this.state.schoolList["幼儿园"].points}</span>
                        </li>
                    </ul>
                </div>
            </div>
        )
    }
}

export { SchoolRank }